<template>
  <view class="card-wrap">
    <view class="card">
      <view class="user-info">
        <view class="profile-box">
          <image :src="avatarUrl" class="image" mode="aspectFit"></image>
        </view>
        <view class="name-box">
          <text>{{ userInfo.name }}</text>
        </view>
      </view>
      <view class="qr-code" v-if="userInfo && userInfo.no">
        <uni-qrcode cid="qrcodeCanvas" :text="'https://wx2.100xsys.cn/mpwx/' + userInfo.no" :size="size"
          foregroundColor="#333" makeOnLoad @makeComplete="qrcodeCanvasComplete" :class="{
						'qrcode-canvas': qrcodePath
					}"></uni-qrcode>
        <image :src="qrcodePath" class="qr-code-image" mode="aspectFit" v-if="qrcodePath"></image>
      </view>
      <view class="tips">扫描上方二维码关注当前医生</view>
    </view>
    <view class="button-box">
      <button type="primary" class="cu-btn bg-blue" open-type="share" data-type="bindDoctor">
        <text class="cuIcon-card margin-right-xs"></text>
        <text>分享名片</text>
      </button>
      <button type="primary" class="cu-btn bg-blue" data-type="seeDoctor" v-if="myHospital && myHospital.length > 1"
        @click="inviteSeeDoctor">
        <text class="cuIcon-share margin-right-xs"></text>
        <text>就诊链接</text>
      </button>
      <button type="primary" class="cu-btn bg-blue" open-type="share" data-type="seeDoctor" v-else>
        <text class="cuIcon-share margin-right-xs"></text>
        <text>就诊链接</text>
      </button>
    </view>
    <view class="cu-modal" :class="{ show: modalName === 'hospital-list' }">
      <view class="cu-dialog">
        <view class="select-hospital">
          <view class="cu-bar text-bold text-center">选择诊所</view>
          <bx-radio-group class="form-item-content_value radio-group" mode="button" v-model="hospitalNo">
            <bx-radio class="radio" color="#2979ff" v-for="item in myHospital" :name="item.store_no">
              {{ item._store_no_disp }}</bx-radio>
          </bx-radio-group>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import UniQrcode from '@/components/uni-qrcode/uni-qrcode';
  export default {
    components: {
      UniQrcode
    },
    data() {
      return {
        userInfo: {},
        size: uni.upx2px(550),
        qrcodePath: '',
        myHospital: [],
        modalName: '',
        hospitalNo: ''
      };
    },
    computed: {
      avatarUrl() {
        if (this.userInfo.user_image) {
          return this.getImagePath(this.userInfo.user_image);
        } else if (this.userInfo.profile_url) {
          return this.getImagePath(this.userInfo.profile_url);
        }
      }
    },
    methods: {
      inviteSeeDoctor() {
        this.modalName = 'hospital-list';
      },
      async getHospital() {
        let url = this.getServiceUrl('health', 'srvhealth_store_user_select', 'select');
        let req = {
          serviceName: 'srvhealth_store_user_select',
          colNames: ['*'],
          condition: [{
            colName: 'person_no',
            ruleType: 'eq',
            value: this.userInfo.no
          }],
          query_source: 'list_page'
        };
        let res = await this.$http.post(url, req);
        if (Array.isArray(res.data.data) && res.data.data.length > 0) {
          this.myHospital = res.data.data;
          if (res.data.data.length === 1) {
            this.hospitalNo = res.data.data[0].store_no;
          }
        } else {
          this.myHospital = false;
        }
      },
      async getDoctorInfo() {
        // 查找医生信息
        let url = this.getServiceUrl('health', 'srvhealth_doctor_select', 'select');
        let req = {
          serviceName: 'srvhealth_doctor_select',
          colNames: ['*'],
          condition: [{
            colName: 'owner_account',
            ruleType: 'like',
            value: this.userInfo.userno
          }],
          page: {
            pageNo: 1,
            rownumber: 10
          }
        };
        let res = await this.$http.post(url, req);
        if (res.data.state === 'SUCCESS' && Array.isArray(res.data.data) && res.data.data.length > 0) {
          return res.data.data[0];
        } else {
          return false;
        }
      },
      qrcodeCanvasComplete(e) {
        this.qrcodePath = e;
      }
    },
    onShareAppMessage(e) {
      let path = '';
      let title = '百想健康';
      if (e.target && e.target.dataset && e.target.dataset.type === 'seeDoctor') {
        let fieldsCond = [{
            column: 'doctor_no',
            display: false,
            value: this.userInfo.no
          },
          {
            column: 'doctor_name',
            display: false,
            value: this.userInfo.name
          },
          {
            column: 'user_info_no',
            display: false
          },
          {
            column: 'user_no',
            display: false
          },
          {
            column: 'store_no',
            value: this.hospitalNo,
            display: false
          }
        ];
        path =
          `/publicPages/formPage/formPage?invite_user_no=${this.userInfo.userno}&store_no=${this.hospitalNo}&doctor_no=${
					this.userInfo.no
				}&share_type=seeDoctor&serviceName=srvhealth_see_doctor_record_add&type=add&fieldsCond=` + encodeURIComponent(JSON
            .stringify(fieldsCond));
        title = `${this.userInfo.name}邀请您登记就诊信息`;
      } else if (e.target && e.target.dataset && e.target.dataset.type === 'bindDoctor') {
        let q = encodeURIComponent(`https://wx2.100xsys.cn/mpwx/${this.userInfo.no}`);
        if (this.userInfo && this.userInfo.no) {
          path = `/personalPages/myDoctor/myDoctor?from=share&invite_user_no=${this.userInfo.userno}&q=${q}`;
          title = `${this.userInfo.name}邀请你体验【百想首页】小程序`;
        }
        this.saveSharerInfo(this.userInfo, path);
      } else {
        if (this.userInfo.name) {
          title = this.userInfo.name;
        }
      }
      title = this.renderEmoji(title)
      return {
        imageUrl: this.qrcodePath,
        title: title,
        path: path
      };
    },
    async onLoad() {
      await this.toAddPage()
      let userInfo = uni.getStorageSync('current_user_info');
      
      let current_user_info = this.userInfo
      if (current_user_info && current_user_info.userno) {
        userInfo = current_user_info;
      }
      if (userInfo) {
        this.userInfo = userInfo;
        this.getHospital();
      } else {
        uni.showToast({
          title: '未发现用户信息',
          icon: 'none'
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .card-wrap {
    width: 100%;
    padding: 0 50rpx;
    height: 80vh;
    padding-top: 10vh;
    display: flex;
    height: auto;
    display: flex;
    flex-direction: column;

    .button-box {
      margin-top: 20rpx;

      .cu-btn {
        width: 45%;
      }
    }

    .card {
      width: 100%;
      background-color: #fff;
      border-radius: 10rpx;
      // height: 300rpx;
      min-height: 840rpx;
      padding: 20rpx;

      .user-info {
        display: flex;

        .profile-box {
          width: 100rpx;
          height: 100rpx;

          .image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }

        .name-box {
          margin-left: 20rpx;
          font-size: 34rpx;
          letter-spacing: 2px;
        }
      }

      .qr-code {
        // background-color: #999;
        width: 550rpx;
        height: 550rpx;
        margin: 50rpx auto;

        .qrcode-canvas {
          position: fixed;
          top: -999999px;
        }

        .qr-code-image {
          width: 550rpx;
          height: 550rpx;
        }
      }

      .tips {
        text-align: center;
        color: #999;
        font-size: 24rpx;
        margin-bottom: 20rpx;
      }
    }
  }

  .select-hospital {
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
